<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>盒模型练习</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .BigBox {
                width: 1005px;
                height: 824px;
                background:pink;
                overflow: hidden;
                /*position: absolute;
                top: 0px;
                left: 0px;
                right: 0px;
                bottom: 0px;
                margin: auto;*/
            }
            ul{
                width: 1040px;
                height: 830px;
                text-align: center;
            }
            ul li{
                width: 240px;
                height: 398px;
                box-sizing: border-box;
                float: left;
                background: #ffffff;
                margin-right: 14px;
                margin-bottom: 14px;
                border: 1px solid #e0e0e0;
            }
            ul li:hover{
                border-color: #f10180;
            }
            ul li:hover a{
                background:#f10180;
                color: #ffffff;
            }
            li img:nth-child(1){
                width: 238px;
                height: 219px;
            }
            li img:nth-child(2){
                width: 102px;
                height: 52px;
                margin-top: -28px;
                border: 1px solid #e6e6e6;
                background: #ffffff;
            }
            h3{
                font-size: 17px;
                line-height: 17px;
                margin-top: 26px;
            }
            p{
                font-size: 17px;
                margin-top: 13px;
                color: #f10180;
            }
            span{
                font-size: 24px;
                font-weight: bold;
            }
            a{
                width: 192px;
                height: 30px;
                font-size: 14px;
                color: #f10180;
                display: block;/*a为行标签，所以无法设置宽高*/
                text-decoration: none;
                margin: auto;
                border: 1px solid #f10180;
            }
        </style>
    </head>
    <body>
        <!--内盒子的宽度大于外盒子的时候，大盒子使用溢出，可以实现内部盒子的排列-->
        <div class="BigBox">
            <ul>
                <li>
                    <img src="img/1.jpg" alt="">
                    <img src="img/2.jpg" alt="">
                    <h3>太平鸟女装大牌专场日</h3>
                    <p><span>0.9</span>折起</p>
                    <a href="#">立即抢购</a>
                </li>
                <li>
                    <img src="img/1.jpg" alt="">
                    <img src="img/2.jpg" alt="">
                    <h3>太平鸟女装大牌专场日</h3>
                    <p><span>0.9</span>折起</p>
                    <a href="#">立即抢购</a>
                </li>
                <li>
                    <img src="img/1.jpg" alt="">
                    <img src="img/2.jpg" alt="">
                    <h3>太平鸟女装大牌专场日</h3>
                    <p><span>0.9</span>折起</p>
                    <a href="#">立即抢购</a>
                </li>
                <li>
                    <img src="img/1.jpg" alt="">
                    <img src="img/2.jpg" alt="">
                    <h3>太平鸟女装大牌专场日</h3>
                    <p><span>0.9</span>折起</p>
                    <a href="#">立即抢购</a>
                </li>
                <li>
                    <img src="img/1.jpg" alt="">
                    <img src="img/2.jpg" alt="">
                    <h3>太平鸟女装大牌专场日</h3>
                    <p><span>0.9</span>折起</p>
                    <a href="#">立即抢购</a>
                </li>
                <li>
                    <img src="img/1.jpg" alt="">
                    <img src="img/2.jpg" alt="">
                    <h3>太平鸟女装大牌专场日</h3>
                    <p><span>0.9</span>折起</p>
                    <a href="#">立即抢购</a>
                </li>
                <li>
                    <img src="img/1.jpg" alt="">
                    <img src="img/2.jpg" alt="">
                    <h3>太平鸟女装大牌专场日</h3>
                    <p><span>0.9</span>折起</p>
                    <a href="#">立即抢购</a>
                </li>
                <li>
                    <img src="img/1.jpg" alt="">
                    <img src="img/2.jpg" alt="">
                    <h3>太平鸟女装大牌专场日</h3>
                    <p><span>0.9</span>折起</p>
                    <a href="#">立即抢购</a>
                </li>
            </ul>
        </div>
    </body>
</html>